<template>
    <div>
    <j-modal
            :title="title"
            :width="width"
            :visible="visible"
            switchFullscreen
            @ok="handleOk"
            :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
            @cancel="handleCancel"
            cancelText="取消绑定"
    >
        <div>
            <h2>请选择要绑定的回收员</h2>
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                    <a-row :gutter="24">
                        <a-col :span="10">
                            <a-form-item label="回收员名称">
                                <a-input placeholder="请输入回收员名称" v-model="queryParam.personName"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <a-table
                    ref="table"
                    size="middle"
                    :scroll="{x:true}"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    class="j-table-force-nowrap"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
                    @change="handleTableChange">
                    <span slot="action" slot-scope="text, record">
                        <a @click="handleOpen(record)">选择</a>
                    </span>
            </a-table>
        </div>
    </j-modal>
    </div>
</template>

<script>
    import { httpAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'

    export default {
        name: 'HcReUserModal',
        mixins: [JeecgListMixin, mixinDevice],
        props: {
            // 父组件传递过来的值
            currentCompanysId: {
                type: String,
                default: ''
            },

        },
        data() {
            return {
                title: '',
                width: '80%',
                visible: false,
                disableSubmit: false,
                form: {
                    lineId: '' ,//路线id
                    userId: '' ,// 回收员Id
                    userName: '' ,// 回收员名称
                },
                // 表头
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key: 'rowIndex',
                        width: 60,
                        align: 'center',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        }
                    },
                    {
                        title: '回收员编号',
                        align: 'center',
                        dataIndex: 'id'
                    },
                    {
                        title: '回收员名称',
                        align: 'center',
                        dataIndex: 'realname'
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                url: {
                    list: '/sys/user/getUCompanyUser',
                    add: '/hc/line/bindPerson',
                    edit: '/hc/hcCarUser/edit',
                    queryById: '/hc/hcCarUser/queryById'
                },
            }
        },
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            currentCompanysId: function(newValue, oldValue) {
                this.initDictConfig()
                this.loadData()
            },
        },
        methods: {
            initDictConfig() {
                // 根据当前用户去查询
                if (this.currentCompanysId) {
                    this.queryParam.companysId = this.currentCompanysId
                }
            },
            searchQuery() {
                this.loadData(1)
            },
            add(lineId) {
                this.edit({}, lineId)
            },
            edit(record,lineId) {
                this.visible = true
                // 收运员ID(用户ID)
                if (lineId) {
                    this.form['lineId'] = lineId
                }
            },

            onSelectChange(selectedRowKeys, selectionRows) {
                this.selectedRowKeys = selectedRowKeys
                this.form.userName = selectionRows[0].realname
            },
            handleOpen(record) {
                this.selectedRowKeys = [record.id]
                this.form.userName = record.realname
            },

            close() {
                this.visible = false;
                this.selectedRowKeys = [];
                this.form['userId'] = null;
                this.form['userName'] = null;
                this.queryParam.personName = null;
            },
            // 进行数据提交
            handleOk() {
                if (!this.selectedRowKeys.length) {
                    this.$message.info('请选择绑定回收员')
                    return
                }
                const that = this
                let formData = Object.assign(this.form, {

                    userId : this.selectedRowKeys[0],
                })
                httpAction(this.url.add, formData, 'post').then((res) => {
                    if (res.success) {
                        that.$message.success(res.message)
                        this.submitCallback()
                    } else {
                        that.$message.warning(res.message)
                    }
                }).finally(() => {
                })
            },
            submitCallback() {
                this.close()
                this.$emit('ok')
            },
            handleCancel() {
                this.close()
                this.$emit('close')
            }
        }
    }
</script>
